<template>
  <div>
    <div class="select-content">
      <div class="select-left">
        <CheckBtn :btn-list="btnList" @btnClick="btnClick"></CheckBtn>
      </div>
      <div class="select-right">
        <PullDown width="1" :options="options" :select="selectType" @select-item="selectTypeFun"></PullDown>
      </div>
    </div>
    <div class="card_list" @scroll="scrollLoading($event)">
      <NftCard :level="5" :task="8" @buy="buy" v-for="item in 5" @click="goDetail"></NftCard>
      <!-- <p class="nomore" v-if="true">{{ $t("nomore") }}</p> -->
    </div>
  </div>


</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import CheckBtn from './components/CheckBtn.vue';
import PullDown from '../../components/PullDown.vue';
import NftCard from './components/NftCard.vue';
const router = useRouter();

//按钮数据方法
const btnList = ref([
  {
    name: 'TANG-KA',
    value: 'TANG-KA',
    isActive: true
  },
  {
    name: 'BADGE',
    value: 'BADGE',
    isActive: false
  }
]);
const btnClick = (value: any) => {
  btnList.value.forEach(item => {
    item.isActive = (item.value === value.value);
  });
}

//下拉框数据方法
const options = ref([
  { id: 1, key: "0", label: 0 },
  { id: 2, key: "1", label: 1 },
  { id: 3, key: "2", label: 2 },
])
const selectType = ref('0')
const selectTypeFun = (item: any) => {
  selectType.value = item.key;
}

//卡片展示
const list = ref([]);
const loading = ref(false);
const finished = ref(false)
const onLoad = () => {
  loading.value = false;
  finished.value = true;

};
const buy = (item: any) => {
  console.log('购买')
}
const goDetail = () => {
  router.push({ path: 'detail' })
}
// 滚动加载
const scrollLoading = (e: any) => {
  const dom = e.target;
  var scrollTop = dom.scrollTop;
  var windowHeitht = dom.clientHeight;
  var scrollHeight = dom.scrollHeight;
  let total = scrollTop + windowHeitht;
  // console.log(total,'==total===scroll==',scrollHeight,parseInt(total) + 20)
  if (parseInt(total) + 20 >= parseInt(scrollHeight)) {

  }
}
</script>

<style scoped lang="less">
.select-content {
  background-color: antiquewhite;
  // margin: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem;

  .select-left {
    height: 0.4rem;
    width: 2rem;
    background-color: red;
    border-radius: 0.25rem;
  }

  .select-right {
    height: 0.4rem;
    width: 1rem;
    // background-color: red;
    border-radius: 0.25rem;
  }
}

.card_list {
  margin-left: 0.03rem;
  height: calc(100% - 0.6rem);
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;

  >div {
    margin-left: 0.12rem;
    margin-bottom: 0.1rem;
    box-sizing: border-box;
  }
}
</style>